import React, { Component } from "react";
function UserGreeting(props) {
  return <h4>欢迎进入系统</h4>;
}
function GuestGreeting(props) {
  return <h4>你好，请登录或注册</h4>;
}
function Greeting(props) {
  return props.isLogin ? <UserGreeting /> : <GuestGreeting />;

  // return 中如果有jsx语法，则return的整个内容都会被视为jsx，当没有jsx语法的时候，则会已js语法执行，所以注意花括号的使用
  // return (
  //   <div>
  //     <h3>注意：</h3>
  //     {rlement}
  //   </div>
  // );
}
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
    };
  }
  handleLogin() {
    this.setState({ isLogin: true });
  }
  handleLogout() {
    this.setState({ isLogin: false });
  }
  render() {
    let button;
    button = this.state.isLogin ? (
      <button onClick={() => this.handleLogout()}>登出</button>
    ) : (
      <button onClick={() => this.handleLogin()}>登录</button>
    );

    return (
      <div>
        <Greeting isLogin={this.state.isLogin} />
        {button}
      </div>
    );
  }
}
